<template>
  <div clss="box">
    <!--历史搜索-->
    <div class="his-hot" v-show="isShowHistory">
      <div class="hd">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="delClick"/>
      </div>

      <div class="bd">
        <van-tag plain  @click="tagHisClick(item)" type="default" v-for="item in historyKeywordList" :key="item">{{item}}</van-tag>
      </div>
    </div>
    <!--热门推荐-->
    <div class="his-hot">
      <div class="hd">
        <h4>热门搜索</h4>
      </div>
      <div class="bd">
        <van-tag @click="tagHotClick(item.keyword)" plain type="default" v-for="item in hotKeywordList" :key="item.keyword" :class="item.is_hot?'red': ''">{{item.keyword}}</van-tag>
      </div>
    </div>
  </div>

</template>

<script>
  import {delHistory} from "@/network/api";

  export default {
    name: "HistorHot",
    props: {
      historyKeywordList: {
        type: Array,
      },
      hotKeywordList: {
        type: Array,
      }
    },
    data() {
      return {
        isShowHistory: true
      }
    },
    methods: {
      tagHisClick(val) {
        this.$emit('tagHisClick', val)
      },
      tagHotClick(val) {
        // console.log(val)
        this.$emit('tagHotClick', val)
      },
      // 删除历史记录
      delClick() {
        delHistory().then(res => {
          if(res.errno === 0) {
            this.$toast('删除成功！')
            setTimeout(() => {
              this.isShowHistory = false
            },1000)
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .his-hot {
    background-color: #fff;
    padding: .1rem;
    padding-bottom: .18rem;
    margin-bottom: .2rem;
    .hd {
      display: flex;
      justify-content: space-between;
      font-size: .22rem;
      margin-bottom: .05rem;
      h4 {font-size: .19rem}
    }
    .van-tag {
      margin-right: .1rem;
      margin-top: .1rem;
    }
    .red {
      color: #F23A3A;
    }
  }
</style>